<template>
    <div class="toolbox-panel">
      <div>
          <h2>组件</h2>
          <button @click="handleAddImage">添加图片</button>
          <button @click="handleAddText">添加文本</button>
          <button @click="handleAddTable">添加表格</button>

      </div>
      <TemplateManager @templateSelected="emit('templateSelected', $event)" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { useTemplateStore } from '@/stores/templateStore'
  import TemplateManager from './TemplateManager.vue'
  
  const store = useTemplateStore();
  
  // 定义emit事件，以便将子组件的事件传递给父组件(App.vue)
  const emit = defineEmits(['templateSelected']);
  const handleAddImage = () => {
  const url = prompt("请输入图片 URL:", "https://cn.vuejs.org/logo.svg");
  if (url) {
    store.addElement('image', { src: url });
  }
}
  const handleAddText = () => {
    store.addElement('text')
  }
  const handleAddTable = () => {
  store.addElement('table');
}
  </script>
  
  <style scoped>
  .toolbox-panel {
    width: 280px; /* 加宽一点以容纳列表 */
    padding: 1rem;
    border-right: 1px solid #ddd;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 让组件和模板列表上下分布 */
  }
  button {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    text-align: left;
    margin-top: 1rem;
  }
  button:hover {
    background-color: #eee;
  }
  </style>
  